.trfm{
    display: flex;
}
.btn{
    display: flex;
    flex-direction: column;
}
.btn button{
    width: 100px;
    margin: 30px;
    border-radius: 5px;
}
.pspctv1{
    position: relative;
    height: 600px;
}
.trfm1, .trfm2{
    position: relative;
    height: 150px;
    margin: 30px;
}
.block, .block1, .block2, .block3{
    width: 300px;
    height: 100px;
    background: rgb(151, 4, 4);
    transform: rotateY(-50deg);  
    margin: 20px;  
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5em;
}
.pspctv2 .p100{
    perspective: 100px;
}
.pspctv2 .p500{
    perspective: 500px;
}
.pspctv2 .p900{
    perspective: 900px;
}
.pspctv2 .p1300{
    perspective: 1300px;
}

.block4{
    width: 300px;
    height: 100px;
    background: rgb(0, 0, 119);
    position: absolute;
    transform: rotateY(50deg);
}
.block5{
    width: 300px;
    height: 30px;
    background: rgb(179, 117, 2);
    position: absolute;
    transform: rotateY(-50deg) translateY(30px);
}
.p3d{
    transform-style: preserve-3d;
}
.p3d2{
    perspective: 500px;
    transform-style: preserve-3d;
}
.wrapper{
    position: relative;
    width: 100%;
}
.wrapper .card{
    position: relative;
    height: 100px;
    width: 100px;
}

.wrapper2 .card{
    position: relative;
    height: 100px;
    width: 100px;
    transform-style: preserve-3d;
    perspective: 500px;
    perspective-origin: -150% -150%;
}
.card .face{
    background: rgba(170, 170, 170, 0.692);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: solid 1px black;
}
.card .face:nth-child(1){
    transform: rotateX(-270deg) translateZ(50px);
}
.card .face:nth-child(2){
    transform: rotateX(-90deg) translateZ(50px);
}
.card .face:nth-child(3){
    transform: translateZ(50px);       
}    
.card .face:nth-child(4){
    transform: rotateX(-180deg) translateZ(50px);
}   
.card .face:nth-child(5){
    transform: rotateY(-90deg) translateZ(50px);
}   
.card .face:nth-child(6){
    transform: rotateY(90deg) translateZ(50px);
} 











.center{
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    width: 100%;
    perspective: 1200px;
}
.center .img-card, .center2 .img-card{
    position: relative;
    height: 400px;
    width: 400px;
    transform-style: preserve-3d;
    transition: transform .5s ease-in;
    margin-left: 0;
}


.img-card img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin-left: 0;
    top: 0;
    left: 70px;
}
.img-card img:nth-child(1){
    transform: rotateX(-270deg) translateZ(200px);
    /* transform-origin: top left; */
}
.img-card img:nth-child(2){
    transform: rotateX(-90deg) translateZ(200px);
    /* transform-origin: bottom center; */
}
.img-card img:nth-child(3){
    transform: translateZ(200px);       
}    
.img-card img:nth-child(4){
    transform: rotateX(-180deg) translateZ(200px);
    /* transform-origin: bottom right; */
}   
.img-card img:nth-child(5){
    transform: rotateY(-90deg) translateZ(200px);
    /* transform-origin: top left; */
}   
.img-card img:nth-child(6){
    transform: rotateY(90deg) translateZ(200px);
    /* transform-origin: top right; */
}    
#top:checked ~ .img-card{
    transform: rotateX(-90deg);
}
#bottom:checked ~ .img-card{
    transform: rotateX(90deg);
}
#front:checked ~ .img-card{
    transform: rotateX(0deg);
}
#rear:checked ~ .img-card{
    transform: rotateX(180deg);
}
#left:checked ~ .img-card{
    transform: rotateY(90deg) translateZ(50px) translateX(-100px);
}
#right:checked ~ .img-card{
    transform: rotateY(-90deg) translateZ(-50px) translateX(-100px);
}
.sliders {
    position: absolute;
    display: block;
    right: 0;
    top: -30px;
}
.sliders label{
    height: 98px;
    width: 110px;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    margin: 6px 0;
    border: 2px solid #2d4052;
}
.sliders label:nth-child(1){
    margin-top: 0;
}
label img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: .9;
} 
label img:hover,
#tab-1:checked ~ .sliders label:nth-child(1) img,
#tab-2:checked ~ .sliders label:nth-child(2) img,
#tab-3:checked ~ .sliders label:nth-child(3) img,
#tab-4:checked ~ .sliders label:nth-child(4) img{
    filter: grayscale(0);
    opacity: 1;
}
input{
    display: none;
}

.center2{
    animation: cube 30s linear infinite;
    transform-style:preserve-3d;
}
@keyframes cube{
    0%{
        transform: rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(720deg);
    }
}

@media (max-width: 480px){
.trfm{
    flex-direction: column;
}
.center .img-card, .center2 .img-card{
    height: 200px;
    width: 200px;
}
.img-card img{
    left: 10px;
}
.img-card img:nth-child(1){
    transform: rotateX(-270deg) translateZ(100px);
    /* transform-origin: top left; */
}
.img-card img:nth-child(2){
    transform: rotateX(-90deg) translateZ(100px);
    /* transform-origin: bottom center; */
}
.img-card img:nth-child(3){
    transform: translateZ(100px);       
}    
.img-card img:nth-child(4){
    transform: rotateX(-180deg) translateZ(100px);
    /* transform-origin: bottom right; */
}   
.img-card img:nth-child(5){
    transform: rotateY(-90deg) translateZ(100px);
    /* transform-origin: top left; */
}   
.img-card img:nth-child(6){
    transform: rotateY(90deg) translateZ(100px);
    /* transform-origin: top right; */
}    
#top:checked ~ .img-card{
    transform: rotateX(-90deg);
}
#bottom:checked ~ .img-card{
    transform: rotateX(90deg);
}
#front:checked ~ .img-card{
    transform: rotateX(0deg);
}
#rear:checked ~ .img-card{
    transform: rotateX(180deg);
}
#left:checked ~ .img-card{
    transform: rotateY(90deg) translateZ(25px) translateX(-100px);
}
#right:checked ~ .img-card{
    transform: rotateY(-90deg) translateZ(-25px) translateX(-100px);
}
.sliders {
    right: 30px;
}
.sliders label{
    height: 48px;
    width: 55px;
   
}

}